<template>
  <div class="wifi">
    <header>
      <div style="display: inline-block;padding-left: 0.2rem">
        <p style="color: black">{{shopinfo.business_name}}</p>
        <P style="font-size: 0.25rem;margin-top: 0.1rem">城市高端CLUB</P>
      </div>
      <div style="display: inline-block;float: right;">
        <div class="logo"></div>
      </div>
    </header>
    <div class="contentInfo">
      <div class="info">
        <span class="icon icon1"></span>
        <span class="iconInfo" @click="getlocation">{{shopinfo.district}}{{shopinfo.address}}</span>
      </div>
      <div class="info">
        <span class="icon icon2"></span>
        <span class="iconInfo">{{shopinfo.open_time}}</span>
      </div>
      <div class="info">
       <span class="icon icon3"></span>
       <span class="iconInfo"><a href="tel:028-83133339">{{shopinfo.telephone}}</a></span>
     </div>
     <div class="info">
      <span class="icon icon4"></span>
      <span class="iconInfo">门店照片</span>
    </div>
    <div class="photolist">
      <img :src="item.photo_url" class="photo" v-for="item in shopinfo.photo_list" @click="previewImage(item.photo_url)">
      
    </div>
  </div>
</div>
</template>

<script>
  export default {

    data () {
      return {
        sign:{},
        shopinfo:{}
      }
    },
    methods:{
      getlocation:function(){
        
        wx.openLocation({
          latitude:this.shopinfo.latitude,
          longitude: this.shopinfo.longitude, // 经度，浮点数，范围为180 ~ -180。
    name: this.shopinfo.business_name, // 位置名
    address:this.shopinfo.city+this.shopinfo.address , // 地址详情说明
    scale: 20, // 地图缩放级别,整形值,范围从1~28。默认为最大
    infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
  })
      },
      previewImage:function(url){
        var a = []
        for (var i = 0;i<this.shopinfo.photo_list.length; i++) {
          a.push(this.shopinfo.photo_list[i].photo_url)
        }
        
        wx.previewImage({
          current:"http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl="+url,
          urls:a
        })
      }
    },
    mounted(){
      // console.log(location)
      
      let _this = this
      this.$http.get("http://api.kx910.com/api/client/getSignature",{
        params:{
          url:location.href

        }
      })
      .then(function(res) {
      // body... 
      _this.sign=res.data.data
      // console.log(_this.sign)
      wx.config({
        debug:false,
        appId:_this.sign.appid,
    timestamp:_this.sign.timestamp, // 必填，生成签名的时间戳
    nonceStr: _this.sign.noncestr, // 必填，生成签名的随机串
    signature: _this.sign.signature,// 必填，签名，见附录1
    jsApiList: [
    "openLocation",
    "previewImage"
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  })
    })          
      this.$http.get("http://api.kx910.com/api/client/getStoreinfo",{
        params:{
          shop_id:_this.$route.query.shop_id
        }
      })
      .then(function(res){

        _this.shopinfo = res.data.data
        console.log('门店信息',_this.shopinfo)
        for (var i = 0;i<_this.shopinfo.photo_list.length; i++) {
          _this.shopinfo.photo_list[i].photo_url="http://read.html5.qq.com/image?src=forum&q=5&r=0&imgflag=7&imageUrl="+_this.shopinfo.photo_list[i].photo_url
        }
      })
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .photolist{
   /*display: flex;*/
   width: 100%;
   padding-left: 0.4rem;
   padding-top: 0.2rem
   /*flex-wrap: wrap*/
 }
 .photo{
  /*flex: auto;*/
  float: left;
  width:2.0rem;
  height: 2.0rem;
  
  margin-left: 0.1rem;margin-top: 0.1rem;
  display: block
}
*{
  margin: 0;
  padding: 0;
  font-family: "微软雅黑"
}
header{
  text-align: left;
  font-size: 0.45rem;
  font-weight: normal;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed gray
}
.logo{
  width: 1rem;
  height: 1rem;
  border-radius: 0.5rem;
  background:url(../assets/img/dc.jpg) no-repeat;margin-right: 0.5rem;
  background-size: contain
}
.icon{
  width: 0.3rem;
  height: 0.3rem;
  display: inline-block;

}
.icon1{
  background: url(../assets/img/定位.png)no-repeat;
  background-size: contain;
}
.icon2{
  background:url(../assets/img/时间.png)no-repeat;
  background-size: contain;
}
.icon3{
  background:url(../assets/img/电话.png)no-repeat;
  background-size: contain;
}
.icon4{
  background: url(../assets/img/图片.png)no-repeat;
  background-size: contain;
}
.info{
  text-align: left;
  margin-top: 0.4rem;
  padding-left: 0.2rem
}
.contentInfo{
  font-size: 0.3rem;
  color: black
}
a{
  text-decoration: none;color: black
}
.iconInfo{
  margin-left: 0.15rem;
}
</style>
